<template>
  <div class='index-container'>
    <div class='index-head'>
      <span>我的首页</span>
    </div>
    <div class='chart-and-hot'>
      <div class='chart-content'>
        <div class='statistics'>
          <div class='statistics-content'>
            <img src='~/assets/pages/index/data_icon1.png' alt=''>
            <div class='statistics-detail'>
              <span>6</span>
              <span>已完成活动</span>
            </div>
          </div>
          <div class='divider-line'></div>
          <div class='statistics-content'>
            <img src='~/assets/pages/index/data_icon2.png' alt=''>
            <div class='statistics-detail'>
              <span>6</span>
              <span>正在执行活动</span>
            </div>
          </div>
          <div class='divider-line'></div>
          <div class='statistics-content'>
            <img src='~/assets/pages/index/data_icon3.png' alt=''>
            <div class='statistics-detail'>
              <span>6</span>
              <span>待审批活动</span>
            </div>
          </div>
        </div>
        <div class='chart-detail'>
          <div class="chart-title">
            <span>执行活动数据（指标情况）</span>
          </div>
          <div id='myChart'></div>
        </div>
      </div>
      <div class='hot-content'>
        <div class="hot-container">
          <div class="hot-head">
            <span>近期热点活动推荐</span>
            <img src="~/assets/icons/more.png" alt="">
          </div>
          <div class="hot-content-detail">
            <div class="content-detail">
              <img src="~/assets/mock/hot1.png" alt="">
              <div class="content-meta">
                <span>巧解汽车营销，阿里文娱智能营销平台亮相金轩奖</span>
              </div>
              <span class="content-date">2019-04-17</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import G2 from '@antv/g2'

export default {
  data() {
    return {
      
    }
  },
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      let data = [
        {
          'name': '平均',
          '月份': '1月',
          '销量': 18.9
        }, 
        {
          'name': '平均',
          '月份': '2月',
          '销量': 28.8
        }, 
        {
          'name': '平均',
          '月份': '3月',
          '销量': 39.3
        }, 
        {
          'name': '平均',
          '月份': '4月',
          '销量': 81.4
        }, 
        {
          'name': '平均',
          '月份': '5月',
          '销量': 47
        }, 
        {
          'name': '平均',
          '月份': '6月',
          '销量': 20.3
        }, 
        {
          'name': '平均',
          '月份': '7月',
          '销量': 24
        }, 
        {
          'name': '平均',
          '月份': '8月',
          '销量': 35.6
        }, 
        {
          'name': '购买',
          '月份': '1月',
          '销量': 12.4
        }, 
        {
          'name': '购买',
          '月份': '2月',
          '销量': 23.2
        }, 
        {
          'name': '购买',
          '月份': '3月',
          '销量': 34.5
        }, 
        {
          'name': '购买',
          '月份': '4月',
          '销量': 99.7
        }, 
        {
          'name': '购买',
          '月份': '5月',
          '销量': 52.6
        }, 
        {
          'name': '购买',
          '月份': '6月',
          '销量': 35.5
        }, 
        {
          'name': '购买',
          '月份': '7月',
          '销量': 37.4
        }, 
        {
          'name': '购买',
          '月份': '8月',
          '销量': 42.4
        }
      ]
      let chart = new G2.Chart({
        container: 'myChart',
        forceFit: true,
        height: 365
      })
      chart.source(data)
      chart.legend({
        marker: 'circle'
      })
      chart
        .interval()
        .position('月份*销量')
        .color('name', ['l(90) 0:#c7b4fc 1:#9c7af7', 'l(90) 0:#69efb1 1:#12d2cc'])
        .size(10)
        .adjust([{
          type: 'dodge',
          marginRatio: 1 / 32
        }])
      chart.render()
    }
  }
}
</script>

<style lang='less'>

.index-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0 24/@rem 0 40/@rem;
}

.index-head {
  width: 100%;
  height: 100/@rem;
  font-size: 22/@rem;
  color: @titleTextColor;
  display: flex;
  align-items: center;
}

.chart-and-hot {
  display: flex;
  justify-content: space-between;
}

.chart-content {
  width: 1072/@rem;
}

.statistics {
  width: 100%;
  height: 138/@rem;
  background: @white;
  border-radius: 10/@rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.statistics-content {
  width: 26%;
  height: 100%;
  display: flex;
  align-items: center;

  img {
    width: 85/@rem;
    height: 85/@rem;
  }
}

.divider-line {
  width: 3/@rem;
  height: 57/@rem;
  background-color: @borderColor;
}

.statistics-detail {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  span:nth-of-type(1) {
    font-size: 30/@rem;
    color: @grayTextColor;
  }

  span:nth-of-type(2) {
    font-size: 18/@rem;
    color: @grayTextColor;
  }
}

/* 图表信息 */
.chart-detail {
  width: 100%;
  margin-top: 30/@rem;
  background: @white;
  border-radius: 10/@rem;
  overflow: hidden;
}

.chart-title {
  width: 100%;
  height: 96/@rem;
  padding: 0 50/@rem;
  box-sizing: border-box;
  border-bottom: 1px solid @borderColor;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 24/@rem;
  color: @chartTextColor;
}

#myChart {
  margin-top: 40/@rem;
}

/* 热点 */
.hot-content {
  width: 480/@rem;
}

.hot-container {
  width: 100%;
  height: auto;
  border-radius: 10/@rem;
  background: @white;
  overflow: hidden;
}

.hot-head {
  width: 100%;
  height: 100/@rem;
  font-size: 24/@rem;
  padding: 0 36/@rem 0 46/@rem;
  color: @chartTextColor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: @solidBorder;

  img {
    width: 4/@rem;
    height: 20/@rem;
  }
}

.hot-content-detail {
  width: 100%;
  box-sizing: border-box;
  padding: 0 40/@rem;
  padding-bottom: 30/@rem;
}

.content-detail {
  width: 100%;
  height: 234/@rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-bottom: @solidBorder;

  img {
    height: 115/@rem;
  }

  .content-meta {
    width: 100%;
    margin-top: 20/@rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18/@rem;
    color: #555555;
  }

  .content-date {
    margin-top: 8/@rem;
    font-size: 14/@rem;
    color: #999999;
  }
}
</style>
